<template>
	<view class="table">
		<view class="thead">
			<view 
				:style="{textAlign:align,backgroundColor:titleBg}" 
				class="title" 
				v-for="(item, index) in title"
				:key="index">
				<view :class="index===0?'firstTitle':'manytitle'">{{ item.label }}</view>
			</view>
		</view>
		<view class="tbody_wrap">
			<view class="tbody">
				<view class="col" v-for="(item, index) in title.slice(0, title.length-1)" :key="index">
					<view 
						class="row" 
						v-for="(zItem, zIndex) in tableData" 
						:key="zIndex">
						<view class="firstCol" v-if="index === 0">
							{{ zItem[item.value] }}
						</view>
						<view 
							class="manyCol" 
							:style="{
								backgroundColor:zItem[item.value].source===1?'#e54d42':
								zItem[item.value].source===2?'#2979ff':'', 
								color:'#fff'
							}"
							@click="onClickRow(zItem[item.value])">
							<view>{{zItem[item.value].userNickName}}</view>
							<view>{{zItem[item.value].projectName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			tableData: {
				type: Array,
				required: true
			},
			title: {
				type: Array,
				required: true
			},
			align: {
				type: String,
				default: 'center'
			},
			titleBg: {
				type: String,
				default: '#fff'
			}
		},
		methods: {
			onClickRow(row){
				if(row){
					this.$emit('clickRow', row.appointmentId)
				}
			}
		},
	};
</script>

<style lang="less">
	.table {
		display: flex;
		.thead {
			border-bottom: 1rpx solid #e5e5e5;
			box-shadow: 5rpx 0 5rpx #eee;
			.title {
				box-sizing: border-box;
				// position: relative;
				min-width: 120rpx;
				font-size: 24rpx;
				color: #666;
				border: 1rpx solid #eee;
				border-bottom: none;
				border-right: none;
				.manytitle{
					padding: 20rpx;
					height: 140rpx;
					line-height: 140rpx;
				}
				.firstTitle{
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}
		.tbody_wrap {
			overflow-x: auto;
			border-right: 1rpx solid #e5e5e5;
			border-bottom: 1rpx solid #e5e5e5;
			.tbody {
				.col {
					display: flex;
				}
				.row {
					box-sizing: border-box;
					font-size: 24rpx;
					min-width: 260rpx;
					.firstCol {
						text-align: center;
						height: 80rpx;
						line-height: 80rpx;
						border: 1rpx solid #fff;
						border-bottom: none;
						border-left: none;
						background-color: #e54d42;
						color:#fff;
					}
					.manyCol{
						border: 1rpx solid #e5e5e5;
						border-bottom: none;
						border-left: none;
						padding: 20rpx;
						height: 140rpx;
					}
				}
			}
		}
	}
	
</style>